<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端开发工程师简历</title>
  <style>
    /* 基础样式与变量 */
    :root {
      --primary-color: #61dafb; /* React蓝 */
      --secondary-color: #f0db4f; /* JavaScript黄 */
      --vue-color: #42b883; /* Vue绿 */
      --angular-color: #dd0031; /* Angular红 */
      --dark-color: #282c34; /* 深色背景 */
      --light-color: #f8f9fa;
      --text-color: #333;
      --text-light: #fff;
      --transition: all 0.3s ease;
      --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    }
    
    body {
      background-color: var(--light-color);
      color: var(--text-color);
      line-height: 1.6;
      transition: var(--transition);
      overflow-x: hidden;
    }
    
    body.dark-mode {
      background-color: var(--dark-color);
      color: var(--text-light);
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0;
      position: relative;
    }
    
    /* 响应式布局 */
    .resume-layout {
      display: grid;
      grid-template-columns: 300px 1fr;
      gap: 30px;
      padding: 20px;
    }
    
    @media (max-width: 768px) {
      .resume-layout {
        grid-template-columns: 1fr;
      }
      
      .sidebar {
        order: 2;
      }
      
      .main-content {
        order: 1;
      }
    }
    
    /* 侧边栏样式 */
    .sidebar {
      background: linear-gradient(135deg, var(--dark-color) 0%, #364156 100%);
      color: var(--text-light);
      padding: 30px;
      border-radius: 10px;
      box-shadow: var(--box-shadow);
      position: relative;
      overflow: hidden;
      z-index: 1;
    }
    
    .sidebar::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="2"/></svg>');
      z-index: -1;
      opacity: 0.5;
    }
    
    .profile {
      text-align: center;
      margin-bottom: 30px;
    }
    
    .profile-img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      object-fit: cover;
      border: 5px solid rgba(255, 255, 255, 0.2);
      margin-bottom: 20px;
      transition: var(--transition);
      animation: float 6s ease-in-out infinite;
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    
    .profile-img:hover {
      transform: scale(1.05);
      border-color: var(--primary-color);
      animation-play-state: paused;
    }
    
    .name {
      font-size: 1.8rem;
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .title {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 20px;
      position: relative;
      display: inline-block;
    }
    
    .title::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 25%;
      width: 50%;
      height: 2px;
      background: var(--primary-color);
    }
    
    .contact-info {
      margin-bottom: 30px;
    }
    
    .contact-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      transition: var(--transition);
    }
    
    .contact-item:hover {
      transform: translateX(5px);
    }
    
    .contact-icon {
      width: 30px;
      height: 30px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      font-size: 14px;
      transition: var(--transition);
    }
    
    .contact-item:hover .contact-icon {
      background: var(--primary-color);
      color: var(--dark-color);
    }
    
    .contact-text {
      font-size: 0.9rem;
      color: rgba(255, 255, 255, 0.9);
    }
    
    .section-title {
      font-size: 1.2rem;
      margin-bottom: 20px;
      position: relative;
      padding-bottom: 10px;
      color: var(--text-light);
    }
    
    .section-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 30px;
      height: 3px;
      background: var(--primary-color);
      transition: var(--transition);
    }
    
    .sidebar-section:hover .section-title::after {
      width: 50px;
    }
    
    /* 技能样式 */
    .skill-item {
      margin-bottom: 15px;
    }
    
    .skill-name {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      font-size: 0.9rem;
      color: rgba(255, 255, 255, 0.9);
    }
    
    .skill-bar {
      height: 8px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }
    
    .skill-progress {
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      transition: width 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    
    .skill-progress.html {
      background: linear-gradient(90deg, #e34c26 0%, #f06529 100%);
    }
    
    .skill-progress.css {
      background: linear-gradient(90deg, #264de4 0%, #2965f1 100%);
    }
    
    .skill-progress.js {
      background: linear-gradient(90deg, #f0db4f 0%, #f4e425 100%);
    }
    
    .skill-progress.react {
      background: linear-gradient(90deg, #61dafb 0%, #00b7ff 100%);
    }
    
    .skill-progress.vue {
      background: linear-gradient(90deg, #42b883 0%, #35495e 100%);
    }
    
    .skill-progress.node {
      background: linear-gradient(90deg, #68a063 0%, #3c873a 100%);
    }
    
    /* 主要内容样式 */
    .main-content {
      background: white;
      border-radius: 10px;
      padding: 40px;
      box-shadow: var(--box-shadow);
      transition: var(--transition);
    }
    
    body.dark-mode .main-content {
      background: #363c48;
    }
    
    .main-section {
      margin-bottom: 40px;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    
    .main-section.visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    .main-title {
      font-size: 1.8rem;
      color: var(--primary-color);
      margin-bottom: 25px;
      position: relative;
      display: inline-block;
    }
    
    body.dark-mode .main-title {
      color: var(--primary-color);
    }
    
    .main-title::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 100%;
      height: 3px;
      background: var(--primary-color);
    }
    
    /* 关于我样式 */
    .about-content {
      font-size: 1rem;
      line-height: 1.8;
      margin-bottom: 20px;
    }
    
    .code-snippet {
      background: #f5f5f5;
      padding: 15px;
      border-radius: 5px;
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 0.9rem;
      margin: 20px 0;
      position: relative;
      overflow: hidden;
      transition: var(--transition);
    }
    
    body.dark-mode .code-snippet {
      background: #1e2127;
    }
    
    .code-snippet::before {
      content: 'JavaScript';
      position: absolute;
      top: 0;
      right: 0;
      background: var(--primary-color);
      color: white;
      padding: 2px 10px;
      font-size: 0.8rem;
      border-bottom-left-radius: 5px;
    }
    
    .code-snippet:hover {
      transform: translateY(-5px);
      box-shadow: var(--box-shadow);
    }
    
    .keyword {
      color: #0000ff;
    }
    
    body.dark-mode .keyword {
      color: #569cd6;
    }
    
    .string {
      color: #a31515;
    }
    
    body.dark-mode .string {
      color: #ce9178;
    }
    
    .comment {
      color: #008000;
    }
    
    body.dark-mode .comment {
      color: #6a9955;
    }
    
    .function {
      color: #795e26;
    }
    
    body.dark-mode .function {
      color: #dcdcaa;
    }
    
    /* 时间线样式 */
    .timeline {
      position: relative;
      padding-left: 30px;
    }
    
    .timeline::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 2px;
      height: 100%;
      background: rgba(0, 0, 0, 0.1);
    }
    
    body.dark-mode .timeline::before {
      background: rgba(255, 255, 255, 0.1);
    }
    
    .timeline-item {
      position: relative;
      margin-bottom: 30px;
      padding-bottom: 20px;
    }
    
    .timeline-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: -30px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: white;
      border: 2px solid var(--primary-color);
      z-index: 1;
      transition: var(--transition);
    }
    
    body.dark-mode .timeline-item::before {
      background: #363c48;
    }
    
    .timeline-item:hover::before {
      background: var(--primary-color);
      transform: scale(1.2);
    }
    
    .timeline-title {
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--primary-color);
      margin-bottom: 5px;
    }
    
    .timeline-subtitle {
      font-size: 1rem;
      color: var(--vue-color);
      margin-bottom: 10px;
      font-weight: 500;
    }
    
    .timeline-date {
      font-size: 0.9rem;
      color: #777;
      margin-bottom: 15px;
    }
    
    body.dark-mode .timeline-date {
      color: #aaa;
    }
    
    .timeline-content {
      font-size: 0.95rem;
      line-height: 1.6;
      color: #555;
    }
    
    body.dark-mode .timeline-content {
      color: #ddd;
    }
    
    /* 项目卡片样式 */
    .project-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 25px;
    }
    
    .project-card {
      background: #f9f9f9;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: var(--box-shadow);
      transition: var(--transition);
      position: relative;
      z-index: 1;
      border-left: 4px solid var(--primary-color);
    }
    
    body.dark-mode .project-card {
      background: #2a2a2a;
      border-left-color: var(--primary-color);
    }
    
    .project-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    
    .project-content {
      padding: 25px;
    }
    
    .project-title {
      font-size: 1.2rem;
      font-weight: 600;
      margin-bottom: 10px;
      color: var(--primary-color);
    }
    
    .project-tech {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 15px;
    }
    
    .tech-tag {
      font-size: 0.8rem;
      padding: 3px 10px;
      background: rgba(97, 218, 251, 0.1);
      color: var(--primary-color);
      border-radius: 15px;
      transition: var(--transition);
    }
    
    body.dark-mode .tech-tag {
      background: rgba(97, 218, 251, 0.1);
    }
    
    .project-card:hover .tech-tag {
      background: rgba(97, 218, 251, 0.2);
    }
    
    .project-description {
      font-size: 0.9rem;
      line-height: 1.6;
      color: #555;
    }
    
    body.dark-mode .project-description {
      color: #ddd;
    }
    
    /* 作品展示 */
    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    
    .portfolio-item {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: var(--box-shadow);
      transition: var(--transition);
      height: 150px;
    }
    
    .portfolio-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }
    
    .portfolio-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: var(--transition);
    }
    
    .portfolio-item:hover .portfolio-img {
      transform: scale(1.1);
    }
    
    .portfolio-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: var(--transition);
    }
    
    .portfolio-item:hover .portfolio-overlay {
      opacity: 1;
    }
    
    .portfolio-title {
      color: white;
      font-size: 1rem;
      text-align: center;
      padding: 0 10px;
    }
    
    /* 交互元素 */
    .interactive-elements {
      margin-top: 30px;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
    }
    
    .interactive-button {
      padding: 10px 20px;
      background: var(--primary-color);
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 1rem;
      transition: var(--transition);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .interactive-button:hover {
      background: var(--dark-color);
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    body.dark-mode .interactive-button:hover {
      background: var(--primary-color);
      color: var(--dark-color);
    }
    
    /* 主题切换按钮 */
    .theme-switch {
      position: fixed;
      bottom: 30px;
      right: 30px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: var(--primary-color);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: var(--box-shadow);
      z-index: 1000;
      transition: var(--transition);
      font-size: 1.5rem;
    }
    
    .theme-switch:hover {
      transform: rotate(45deg);
    }
    
    /* 粒子背景 */
    .particles-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
    }
    
    .particle {
      position: absolute;
      background-color: rgba(97, 218, 251, 0.3);
      border-radius: 50%;
      pointer-events: none;
    }
    
    body.dark-mode .particle {
      background-color: rgba(240, 219, 79, 0.3);
    }
    
    /* 鼠标跟随效果 */
    .cursor-follower {
      position: fixed;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: rgba(97, 218, 251, 0.3);
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
      display: none;
    }
    
    body.dark-mode .cursor-follower {
      background-color: rgba(240, 219, 79, 0.3);
    }
    
    /* 打印样式 */
    @media print {
      .theme-switch, .particles-container, .cursor-follower, .interactive-elements {
        display: none !important;
      }
      
      body, body.dark-mode {
        background-color: white;
        color: black;
      }
      
      .resume-layout {
        display: block;
      }
      
      .sidebar, body.dark-mode .sidebar {
        background: #f0f0f0;
        color: black;
        page-break-after: always;
        width: 100%;
        border-radius: 0;
      }
      
      .main-content, body.dark-mode .main-content {
        background: white;
        box-shadow: none;
        padding: 20px 0;
        border-radius: 0;
      }
      
      .main-title, body.dark-mode .main-title,
      .timeline-title, body.dark-mode .timeline-title,
      .project-title, body.dark-mode .project-title {
        color: black;
      }
      
      .main-title::after, body.dark-mode .main-title::after {
        background: black;
      }
      
      .timeline::before {
        background: #ddd;
      }
      
      .timeline-item::before {
        background: white;
        border-color: black;
      }
      
      .project-card, body.dark-mode .project-card {
        break-inside: avoid;
        background: white;
        box-shadow: none;
        border: 1px solid #eee;
      }
      
      .tech-tag, body.dark-mode .tech-tag {
        background: #f0f0f0;
        color: black;
      }
    }
  </style>
</head>
<body>
  <div class="cursor-follower" id="cursorFollower"></div>
  <div class="particles-container" id="particles"></div>
  <div class="theme-switch" id="themeSwitch">🌓</div>
  
  <div class="container">
    <div class="resume-layout">
      <div class="sidebar">
        <div class="profile">
          <img class="profile-img" src="https://gr-test.oss-cn-shenzhen.aliyuncs.com/02a0271622fba72d55334191e540f2793cee0eee8227010727b0ad469bd8c063.png" alt="个人照片">
          <h1 class="name">张三</h1>
          <p class="title">高级前端开发工程师</p>
        </div>
        
        <div class="contact-info">
          <div class="contact-item">
            <div class="contact-icon">📧</div>
            <div class="contact-text">zhangsan@example.com</div>
          </div>
          <div class="contact-item">
            <div class="contact-icon">📱</div>
            <div class="contact-text">13812345678</div>
          </div>
          <div class="contact-item">
            <div class="contact-icon">📍</div>
            <div class="contact-text">北京市朝阳区</div>
          </div>
          <div class="contact-item">
            <div class="contact-icon">🔗</div>
            <div class="contact-text">github.com/zhangsan</div>
          </div>
        </div>
        
        <div class="sidebar-section">
          <h2 class="section-title">技术技能</h2>
          <div class="skill-item">
            <div class="skill-name">
              <span>HTML5/CSS3</span>
              <span>95%</span>
            </div>
            <div class="skill-bar">
              <div class="skill-progress html" data-width="95"></div>
            </div>
          </div>
          <div class="skill-item">
            <div class="skill-name">
              <span>JavaScript/ES6+</span>
              <span>90%</span>
            </div>
            <div class="skill-bar">
              <div class="skill-progress js" data-width="90"></div>
            </div>
          </div>
          <div class="skill-item">
            <div class="skill-name">
              <span>React</span>
              <span>85%</span>
            </div>
            <div class="skill-bar">
              <div class="skill-progress react" data-width="85"></div>
            </div>
          </div>
          <div class="skill-item">
            <div class="skill-name">
              <span>Vue.js</span>
              <span>80%</span>
            </div>
            <div class="skill-bar">
              <div class="skill-progress vue" data-width="80"></div>
            </div>
          </div>
          <div class="skill-item">
            <div class="skill-name">
              <span>Node.js</span>
              <span>75%</span>
            </div>
            <div class="skill-bar">
              <div class="skill-progress node" data-width="75"></div>
            </div>
          </div>
        </div>
        
        <div class="sidebar-section">
          <h2 class="section-title">其他技能</h2>
          <div class="skill-item">
            <div class="skill-name">
              <span>TypeScript</span>
              <span>85%</span>
            </div>
            <div class="skill-bar">
              <div class="skill-progress js" data-width="85"></div>
            </div>
          </div>
          <div class="skill-item">
            <div class="skill-name">
              <span>Webpack/Vite</span>
              <span>80%</span>
            </div>
            <div class="skill-bar">
              <div class="skill-progress js" data-width="80"></div>
            </div>
          </div>
          <div class="skill-item">
            <div class="skill-name">
              <span>SCSS/LESS</span>
              <span>90%</span>
            </div>
            <div class="skill-bar">
              <div class="skill-progress css" data-width="90"></div>
            </div>
          </div>
          <div class="skill-item">
            <div class="skill-name">
              <span>响应式设计</span>
              <span>95%</span>
            </div>
            <div class="skill-bar">
              <div class="skill-progress css" data-width="95"></div>
            </div>
          </div>
        </div>
        
        <div class="sidebar-section">
          <h2 class="section-title">语言能力</h2>
          <div class="skill-item">
            <div class="skill-name">
              <span>中文（母语）</span>
              <span>100%</span>
            </div>
            <div class="skill-bar">
              <div class="skill-progress html" data-width="100"></div>
            </div>
          </div>
          <div class="skill-item">
            <div class="skill-name">
              <span>英语（流利）</span>
              <span>85%</span>
            </div>
            <div class="skill-bar">
              <div class="skill-progress react" data-width="85"></div>
            </div>
          </div>
        </div>
        
        <div class="sidebar-section">
          <h2 class="section-title">个人特质</h2>
          <div class="skill-item">
            <div class="skill-name">
              <span>创新思维</span>
              <span>90%</span>
            </div>
            <div class="skill-bar">
              <div class="skill-progress js" data-width="90"></div>
            </div>
          </div>
          <div class="skill-item">
            <div class="skill-name">
              <span>团队协作</span>
              <span>85%</span>
            </div>
            <div class="skill-bar">
              <div class="skill-progress react" data-width="85"></div>
            </div>
          </div>
          <div class="skill-item">
            <div class="skill-name">
              <span>解决问题能力</span>
              <span>95%</span>
            </div>
            <div class="skill-bar">
              <div class="skill-progress html" data-width="95"></div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="main-content">
        <section class="main-section" id="about">
          <h2 class="main-title">关于我</h2>
          <p class="about-content">
            我是一名拥有5年经验的前端开发工程师，专注于创建高性能、响应式的Web应用。我热爱新技术，善于解决复杂问题，并且具有良好的团队合作精神。我追求代码的优雅和高效，不断学习新技术以提升自己的专业能力。
          </p>
          <div class="code-snippet">
            <pre><span class="keyword">class</span> <span class="function">FrontendDeveloper</span> {
  <span class="function">constructor</span>() {
    <span class="keyword">this</span>.name = <span class="string">"张三"</span>;
    <span class="keyword">this</span>.title = <span class="string">"高级前端开发工程师"</span>;
    <span class="keyword">this</span>.skills = [<span class="string">"HTML5"</span>, <span class="string">"CSS3"</span>, <span class="string">"JavaScript"</span>, <span class="string">"React"</span>, <span class="string">"Vue"</span>];
    <span class="keyword">this</span>.experience = 5; <span class="comment">// 年</span>
  }
  
  <span class="function">solveProblem</span>(problem) {
    <span class="keyword">if</span> (problem.complexity === <span class="string">"high"</span>) {
      <span class="keyword">return</span> <span class="keyword">this</span>.applyAdvancedTechniques(problem);
    } <span class="keyword">else</span> {
      <span class="keyword">return</span> <span class="keyword">this</span>.applyStandardSolution(problem);
    }
  }
  
  <span class="function">learnNewTechnology</span>(technology) {
    <span class="keyword">this</span>.skills.push(technology);
    <span class="keyword">return</span> <span class="string">`已掌握${technology}技术`</span>;
  }
}</pre>
          </div>
          
          <div class="interactive-elements">
            <button class="interactive-button" id="downloadCV">📄 下载简历</button>
            <button class="interactive-button" id="contactMe">📧 联系我</button>
          </div>
        </section>
        
        <section class="main-section" id="experience">
          <h2 class="main-title">工作经验</h2>
          <div class="timeline">
            <div class="timeline-item">
              <h3 class="timeline-title">高级前端开发工程师</h3>
              <h4 class="timeline-subtitle">ABC科技有限公司</h4>
              <p class="timeline-date">2021年6月 - 至今</p>
              <p class="timeline-content">
                负责公司核心产品的前端架构设计和开发，使用React、TypeScript和Redux构建高性能Web应用。主导了前端组件库的开发，提高了团队开发效率30%。优化了应用性能，减少了50%的页面加载时间，提升了用户体验。参与了微前端架构的设计与实现，解决了多团队协作的技术挑战。
              </p>
            </div>
            
            <div class="timeline-item">
              <h3 class="timeline-title">前端开发工程师</h3>
              <h4 class="timeline-subtitle">XYZ互联网科技有限公司</h4>
              <p class="timeline-date">2018年7月 - 2021年5月</p>
              <p class="timeline-content">
                参与开发企业级Web应用和移动端H5项目，使用Vue.js、Webpack和SCSS构建用户界面。实现了响应式设计，确保应用在各种设备上的良好体验。负责前端性能优化和代码重构，提高了应用稳定性和可维护性。与后端团队紧密合作，设计和实现RESTful API接口。
              </p>
            </div>
          </div>
        </section>
        
        <section class="main-section" id="education">
          <h2 class="main-title">教育背景</h2>
          <div class="timeline">
            <div class="timeline-item">
              <h3 class="timeline-title">计算机科学与技术 硕士</h3>
              <h4 class="timeline-subtitle">北京大学</h4>
              <p class="timeline-date">2016 - 2018</p>
              <p class="timeline-content">
                主修Web前端技术与用户体验设计，GPA 3.8/4.0。参与了多个校企合作项目，包括校园信息平台的前端开发。获得优秀毕业生称号和学术奖学金。
              </p>
            </div>
            
            <div class="timeline-item">
              <h3 class="timeline-title">软件工程 学士</h3>
              <h4 class="timeline-subtitle">清华大学</h4>
              <p class="timeline-date">2012 - 2016</p>
              <p class="timeline-content">
                主修软件开发与工程管理，GPA 3.7/4.0。参与了多个Web开发项目，负责前端界面设计和实现。获得三好学生称号和编程竞赛奖项。
              </p>
            </div>
          </div>
        </section>
        
        <section class="main-section" id="projects">
          <h2 class="main-title">项目经验</h2>
          <div class="project-grid">
            <div class="project-card">
              <div class="project-content">
                <h3 class="project-title">企业级管理系统</h3>
                <div class="project-tech">
                  <span class="tech-tag">React</span>
                  <span class="tech-tag">TypeScript</span>
                  <span class="tech-tag">Redux</span>
                  <span class="tech-tag">Ant Design</span>
                  <span class="tech-tag">Webpack</span>
                </div>
                <p class="project-description">
                  设计并开发了一个大型企业管理系统，包含数据可视化、用户管理、权限控制等模块。采用React+TypeScript技术栈，实现了组件化开发和状态管理。优化了应用性能，实现了按需加载和服务端渲染，大幅提升了系统响应速度和用户体验。
                </p>
              </div>
            </div>
            
            <div class="project-card">
              <div class="project-content">
                <h3 class="project-title">电商平台前端重构</h3>
                <div class="project-tech">
                  <span class="tech-tag">Vue.js</span>
                  <span class="tech-tag">Vuex</span>
                  <span class="tech-tag">SCSS</span>
                  <span class="tech-tag">Element UI</span>
                  <span class="tech-tag">Vite</span>
                </div>
                <p class="project-description">
                  主导了电商平台的前端重构工作，将传统的jQuery应用升级为现代化的Vue.js应用。设计了模块化的架构，提高了代码复用性和可维护性。实现了响应式设计，优化了移动端体验，使转化率提升了25%。
                </p>
              </div>
            </div>
            
            <div class="project-card">
              <div class="project-content">
                <h3 class="project-title">前端组件库开发</h3>
                <div class="project-tech">
                  <span class="tech-tag">React</span>
                  <span class="tech-tag">Storybook</span>
                  <span class="tech-tag">Jest</span>
                  <span class="tech-tag">CSS-in-JS</span>
                  <span class="tech-tag">Rollup</span>
                </div>
                <p class="project-description">
                  设计并开发了公司内部使用的UI组件库，包含50+常用组件，支持主题定制和国际化。使用Storybook进行组件开发和文档生成，Jest进行单元测试，确保组件质量。该组件库大幅提高了团队开发效率，统一了产品设计风格。
                </p>
              </div>
            </div>
          </div>
        </section>
        
        <section class="main-section" id="portfolio">
          <h2 class="main-title">作品展示</h2>
          <div class="portfolio-grid">
            <div class="portfolio-item">
              <img class="portfolio-img" src="https://via.placeholder.com/300x200/61dafb/ffffff" alt="作品1">
              <div class="portfolio-overlay">
                <h3 class="portfolio-title">企业管理系统界面</h3>
              </div>
            </div>
            <div class="portfolio-item">
              <img class="portfolio-img" src="https://via.placeholder.com/300x200/f0db4f/ffffff" alt="作品2">
              <div class="portfolio-overlay">
                <h3 class="portfolio-title">电商平台移动端</h3>
              </div>
            </div>
            <div class="portfolio-item">
              <img class="portfolio-img" src="https://via.placeholder.com/300x200/42b883/ffffff" alt="作品3">
              <div class="portfolio-overlay">
                <h3 class="portfolio-title">组件库示例</h3>
              </div>
            </div>
            <div class="portfolio-item">
              <img class="portfolio-img" src="https://via.placeholder.com/300x200/dd0031/ffffff" alt="作品4">
              <div class="portfolio-overlay">
                <h3 class="portfolio-title">数据可视化面板</h3>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>

  <script>
    // 主题切换
    const themeSwitch = document.getElementById('themeSwitch');
    const body = document.body;
    
    themeSwitch.addEventListener('click', () => {
      body.classList.toggle('dark-mode');
      themeSwitch.textContent = body.classList.contains('dark-mode') ? '🌞' : '🌓';
      
      // 保存用户偏好
      localStorage.setItem('darkMode', body.classList.contains('dark-mode'));
    });
    
    // 检查用户之前的偏好
    if (localStorage.getItem('darkMode') === 'true') {
      body.classList.add('dark-mode');
      themeSwitch.textContent = '🌞';
    }
    
    // 技能进度条动画
    function animateSkillBars() {
      const skillBars = document.querySelectorAll('.skill-progress');
      skillBars.forEach(bar => {
        const width = bar.getAttribute('data-width') + '%';
        setTimeout(() => {
          bar.style.width = width;
        }, 300);
      });
    }
    
    // 滚动动画
    function handleScroll() {
      const sections = document.querySelectorAll('.main-section');
      sections.forEach(section => {
        const sectionTop = section.getBoundingClientRect().top;
        const windowHeight = window.innerHeight;
        
        if (sectionTop < windowHeight * 0.75) {
          section.classList.add('visible');
        }
      });
    }
    
    // 创建粒子背景
    function createParticles() {
      const particlesContainer = document.getElementById('particles');
      const particleCount = 30;
      
      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.classList.add('particle');
        
        // 随机大小
        const size = Math.random() * 5 + 2;
        particle.style.width = size + 'px';
        particle.style.height = size + 'px';
        
        // 随机位置
        const posX = Math.random() * 100;
        const posY = Math.random() * 100;
        particle.style.left = posX + '%';
        particle.style.top = posY + '%';
        
        // 随机动画
        const duration = Math.random() * 20 + 10;
        const delay = Math.random() * 5;
        
        particle.style.animation = `floating ${duration}s ease-in-out ${delay}s infinite`;
        particle.style.opacity = Math.random() * 0.5 + 0.1;
        
        particlesContainer.appendChild(particle);
      }
    }
    
    // 鼠标跟随效果
    const cursorFollower = document.getElementById('cursorFollower');
    let mouseX = 0, mouseY = 0;
    let cursorX = 0, cursorY = 0;
    
    // 检测设备类型
    function isTouchDevice() {
      return ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
    }
    
    if (!isTouchDevice()) {
      cursorFollower.style.display = 'block';
      
      document.addEventListener('mousemove', (e) => {
        mouseX = e.clientX;
        mouseY = e.clientY;
      });
      
      function animateCursor() {
        // 平滑跟随效果
        cursorX += (mouseX - cursorX) * 0.1;
        cursorY += (mouseY - cursorY) * 0.1;
        
        cursorFollower.style.transform = `translate(${cursorX}px, ${cursorY}px)`;
        
        // 更新粒子容器的视觉效果
        const particles = document.querySelectorAll('.particle');
        particles.forEach(particle => {
          const rect = particle.getBoundingClientRect();
          const particleX = rect.left + rect.width / 2;
          const particleY = rect.top + rect.height / 2;
          
          const distX = cursorX - particleX;
          const distY = cursorY - particleY;
          const distance = Math.sqrt(distX * distX + distY * distY);
          
          if (distance < 100) {
            const scale = 1 + (100 - distance) / 200;
            particle.style.transform = `scale(${scale})`;
            particle.style.opacity = Math.min(0.8, parseFloat(particle.style.opacity) + 0.1);
          } else {
            particle.style.transform = 'scale(1)';
            particle.style.opacity = Math.max(0.1, parseFloat(particle.style.opacity) - 0.02);
          }
        });
        
        requestAnimationFrame(animateCursor);
      }
      
      // 鼠标悬停效果增强
      const interactiveElements = document.querySelectorAll('a, button, .project-card, .portfolio-item, .timeline-item');
      interactiveElements.forEach(el => {
        el.addEventListener('mouseenter', () => {
          cursorFollower.style.width = '60px';
          cursorFollower.style.height = '60px';
          cursorFollower.style.backgroundColor = 'rgba(97, 218, 251, 0.2)';
        });
        
        el.addEventListener('mouseleave', () => {
          cursorFollower.style.width = '40px';
          cursorFollower.style.height = '40px';
          cursorFollower.style.backgroundColor = 'rgba(97, 218, 251, 0.3)';
        });
      });
      
      animateCursor();
    }
    
    // 交互按钮功能
    document.getElementById('downloadCV').addEventListener('click', function() {
      alert('简历下载功能已触发！在实际应用中，这里会下载PDF版简历。');
    });
    
    document.getElementById('contactMe').addEventListener('click', function() {
      alert('联系功能已触发！在实际应用中，这里会打开联系表单或发送邮件。');
    });
    
    // 初始化
    window.addEventListener('load', () => {
      animateSkillBars();
      handleScroll();
      createParticles();
      
      // 初始显示第一个部分
      document.querySelector('.main-section').classList.add('visible');
    });
    
    window.addEventListener('scroll', handleScroll);
  </script>
</body>
</html>